Presentation: "Solution of a simple, single variable equation" 
Expression used within the presentation: 
3x-6 = 0 

Expression broken down into elements, grey boxes indicate addition of 'meta-media 
identifier 5 structures to add context or meaning to the elements: 
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Figure 1A 



Sample graph (data visualization): 
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Sample data organization for graph visualization with meta-media identifiers. 
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function y = 
.7x+ 3*" 
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Figure IB 



Rendered elements of a visualization 



Rendered elements of an expression 



"graphed f(x)" 



"Graphed f(x) = 7 
when x = 1 0" 



M eta- media 
identifiers (grey) 
provide additional 
context for users 



"x = 10" 



Messages include text entered 
by a user as the body of a 
message, and annotations shown 
by text anchors (shown in blue) 
that reference (blue arrows) a 
target element in either 
visualizations or expressions. 
The references are converted to 
graphical highlights by the 
display engine. 





"independent 
variable" 



I doin't understand the meaning 
of th^ term f(x). Does this mean that f(x) = the 
y- intercept or does it equal y'? 



Figure 2 



A Sequence of expressions used to descibe 
how to solve a simple linear equation. 

Descriptions of key aeps shown in grey 
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File 



A software display engine cfecodes the sequence 
of expressions contained in a Math ML file and 
renders them onto a digital display in 
succession as an animated sequence 



Display 
Engine 



3X-6=0 



A Sequence of graphics used to descibe the 
meaning of a function. 

Frame descriptions of key steps shown in g-ey 
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"When x = 10" 



"Y ? orfl(x) =*7" 




A software display engine decodes the sequence of 
visualizations contained in an SVG file and renders 
them onto a digital display in succession as an animated 
graphic 
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Figure 3 



Example 13-3 . _ . 

Third Segment { | | J> 




y=.7x+ 3 



Message from TOM : 



I don't understand how the - slope of this 
line relates to this value here? 



Attach 

to... 
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Graphed function f(x) 



Graphed Y-lntercept 



Example of one implementation of a user interface displaying a 

'table of contents' for all meta-media identifiers during the 
annotation of a message. In this illustration, the user has typed a 
text message, and wishes to attach an annotation anchored with 
the word 'here'. Pressing the button "Attach to" displays a drop- 
down menu of all the content page elements that have assigned 
meta-media identifiers, facilitating the attachment of the 
annotation to a content element. 



Figure 4A 






Message from TOM: 



I don't understand how slope of the line 
relates to this value here? 



Attach to... 



Manual 
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An alternative form of attaching annotation to content element would involve 
the pressing of a button on the interface to a form of 'manual selection* button. 
The Annotation Management Software would then blink whatever message 
enabled media exists on the content page that has been selected by a user 
initiated mouse click. In this illustration, the user selection of the \T is shown 
with blinking simulated by the rays surrounding the number \7' 
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Figure 5A 



Example 13-2 
Third Segment 
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X is the 
variable 



3X =6 



TOM - Type Message Here 



I don't understand how the - 6 movdd from the 
left to the right. Didn't it used to be here? 
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A user's posting to 
the discussion 
thread of example 
13-2 
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No annotations selected 
posting 



Example 13-2 
Third Segment 
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See: 



X is the 
variable 



3X =6 



Message from TOM: 



I don't understand how the - 6 moved from the left to the 
right. Didn't it used to be here? 



Annotation 'here' selected by reader of 
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Third Segment 
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variable 



3X =6 



Message from TOM: 



I don't understand how the / 6 moved from the left to the 
right. Didn't it used to be here? 



Figure 6 A 



Key skill development 
concepts such as those 
obtained from an 
academic textbook 
(paper or electronic) are 
selected to serve as the 
source of base content 



Derivation of a SINE wave 
A sine wave is simply a horizontal 
view of what an inscribed 
triangle would trace.... 





Selected expressions are 
converted to a standard format 
to support rendering and 
attachment of 'meta-media* 
tags providing context. 

Underlying data structures are 
also 'message-enabled' to 
facilitate annotations and 
exchange among users. 



Figure Topic Used for problems Media name 

5- 2 sine wave 5-9,5-12,1-15 fig5-2.avi 

6- 2 radians 6-4,6-8 fig6-2.avi 



Content database is built 
from collection of 
expressions and related 
media files. 



Media and the database 
are made available to 
students (for example) 
through web pages on 
the internet 




Figure 6B 



Introductory 
Trigonometry 



Networked availability (e.g 
World Wide Web) 





Posting to 
Introductory Trig 
Example 5-2 




From TOM: 
I don't understt! 
where this amplitude 
comes from? 



3. The question is 
posted to other 
persons using the 
text and 
subscribing to a 
service providing 
access to the web- 
enabled content 



Posting to 
Introductory Trig 
Example 5-2 




From JIM: 
It's the length/of the 
'opposite' side of a 
unit triangle 




1. Students 
engaged in 
traditional learning 
access textbook 
with references to 
* message- e nab led ' 
exercises. 



2. Questions about 
specific exercises 
may be asked by way 
of a networked 
personal computer 




4. Other students 
may see the 
question and post 
their response with 
the same segment, 
another segment, or 
even a different 
exercise 



Figure 7 



XML Content 



Database Request 

Select * from Table 'Algebra 
2' where Presentation! D = 
'Example 3-2' 



PHP Request 

"Show me presentation 
named 'Example 3-2' 
From 'Algebra 2' 
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A sample illustration of how a user would initiate a request for content pages. A traditional 
web browser could generate a request compliant with a PHP language request for a given 
presentation. The PHP formatted request would be sent via the internet to a server's PHP 
engine, where the request is converted into a database query(2). The Database accesses 
the media files (3), and a PHP script returns the XML content files(4) to the web browser 
where the Javascript inserts the XML concontent into the displayed HTML tags(5). Note: all 
software illustrations are shown in pseudo-code. 



Figure 8 
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Thick lines indicate container- like relationships (e.g. one Presentation has from 1 to N Content type objects 
associated with it.) Dotted lines indicate a class that makes possible an association between other classes. Attributes 
are shown in italicized text when their inclusion helps clarify the role of the object or helps distinguish different 
types of a class. 



